<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!--====== Favicon Icon ======-->
   <link rel="shortcut icon" href="/images/favicon.png" type="image/png">

   <!--====== Bootstrap CSS ======-->
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/font/bootstrap-icons.css">

   <link rel="stylesheet" href="/js/layui/css/layui.css">

   <link rel="stylesheet" href="/css/newStyle.css">
   <link rel="stylesheet" href="/css/new.css">
   <style>
      .sd{
         width:800px;
         height:100px;
         display: flex;
         color: var(--text-color-title);
         font-size: 20px;
         margin: 0 auto;
         padding-top: 30px;

         input, button{
            height: 52px;
         }
      }
      .cert-content{
         width:800px;
         margin: 0 auto;
         padding: 20px 0;

         table{

            margin-bottom: 20px;
            td{
               line-height: 48px;
               border: 1px #CCCCCC solid;
            }
         }
         .t-left{
            width:150px;
            text-align: center;
            background: var(--background-color);
         }
         .t-right{
            width: 650px;
            font-size: 18px;
            font-weight: bold;
            text-align: left;
            padding-left: 30px;
         }

      }
   </style>
</head>
<body style="min-width: 1200px;">
   <div class="ai-contain">
      <div class="ht">
         <div class="h-title">欢迎来到百模论剑官方网站</div>
         <div class="h-login"><a th:href="@{/uis/loginUI}">登陆</a> | <a th:href="@{/uis/registerUI}">注册</a></div>
      </div>
      <div class="hi">
      </div>
      <div style="background: #FFFFFF;min-height:600px;">
         <div class="sd">
<!--            <div>-->
               <input type="text" name="content" id="content" required  lay-verify="required" placeholder="输入项目名、团队名或姓名查询证书" autocomplete="off" class="layui-input">
<!--            </div>-->
<!--            <div>-->
               <button class="layui-btn layui-btn-normal bg-main" onclick="search()" style="width:200px;margin-left:20px;">查&nbsp;&nbsp;&nbsp;&nbsp;询</button>
<!--            </div>-->

         </div>
         <div class="cert-content" id="cert">
<!--            <table>-->
<!--               <tr>-->
<!--                  <td class="t-left">大赛名称</td>-->
<!--                  <td class="t-right">首届全国AI+应用创新大赛</td>-->
<!--               </tr>-->
<!--               <tr>-->
<!--                  <td class="t-left">项目名称</td>-->
<!--                  <td class="t-right main-color">大语言模型辅助的智能评价与多级精准导学关键技术及其应用</td>-->
<!--               </tr>-->
<!--               <tr>-->
<!--                  <td class="t-left">团队名称</td>-->
<!--                  <td class="t-right">jnu-tal</td>-->
<!--               </tr>-->
<!--               <tr>-->
<!--                  <td class="t-left">团队成员</td>-->
<!--                  <td class="t-right">刘子韬，陈佳豪，刘天乔，郭腾，王婷，刘琼琼，同庆</td>-->
<!--               </tr>-->
<!--               <tr>-->
<!--                  <td class="t-left">奖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项</td>-->
<!--                  <td class="t-right red">一等奖</td>-->
<!--               </tr>-->
<!--               <tr>-->
<!--                  <td class="t-left">发证时间</td>-->
<!--                  <td class="t-right">2024-12-20</td>-->
<!--               </tr>-->
<!--               <tr>-->
<!--                  <td class="t-left">获奖证书</td>-->
<!--                  <td class="t-right">首届全国AI+应用创新大赛</td>-->
<!--               </tr>-->
<!--            </table>-->
         </div>
      </div>
   </div>


   <!-- ICP备案信息 -->
   <div style="width: 100%" th:insert="common/footer :: footer"></div>
   <!--====== Jquery js ======-->
   <script src="/js/jquery-1.12.4.min.js"></script>
   <script src="/js/jquery-validate.js"></script>
   <script src="/js/bootstrap.min.js"></script>
   <!--====== sweetalert js ======-->
   <script src="/js/sweetalert.min.js"></script>
   <!--====== layerUI js ======-->
   <script src="/js/layui/layui.js"></script>
   <script src="/js/common.js"></script>
   <script>
      function search(){
         layui.use(function() {
            let content = $('#content').val();
            if(content == null || content == ''){
               layer.msg('请输入要查询的信息！');
               return ;
            }
            $.ajax({
               url: '/certs/search?content=' + $('#content').val(),
               type: 'GET',
               success: function (data) {
                  // 清空动态内容
                  $('#cert').empty();
                  let contentHtml = '';
                  if (data.data == '' || data.data == null) {
                     contentHtml += '<div>没有查询到结果</div>';
                  }
                  data.data.forEach(function (info) {
                     // 根据获取到的数据重新构建表格内容
                     contentHtml += '<table>' +
                             '               <tr>' +
                             '                  <td class="t-left">大赛名称</td>' +
                             '                  <td class="t-right">' + info.competition + '</td>' +
                             '               </tr>' +
                             '               <tr>' +
                             '                  <td class="t-left">项目名称</td>' +
                             '                  <td class="t-right main-color">' + info.projectName + '</td>' +
                             '               </tr>' +
                             '               <tr>' +
                             '                  <td class="t-left">团队名称</td>' +
                             '                  <td class="t-right main-color">' + info.teamName + '</td>' +
                             '               </tr>' +
                             '               <tr>' +
                             '                  <td class="t-left">团队成员</td>' +
                             '                  <td class="t-right">' + info.names + '</td>' +
                             '               </tr>' +
                             '               <tr>' +
                             '                  <td class="t-left">奖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项</td>' +
                             '                  <td class="t-right red">' + info.prize + '</td>' +
                             '               </tr>' +
                             '               <tr>' +
                             '                  <td class="t-left">发证时间</td>' +
                             '                  <td class="t-right">' + info.startTimeName + '</td>' +
                             '               </tr>' +
                             '               <tr>' +
                             '                  <td class="t-left">获奖证书</td>' +
                             '                  <td class="t-right"><img src="' + imagesUrl + info.images + '"></td>' +
                             '               </tr>' +
                             '            </table>';
                  })
                  $('#cert').html(contentHtml);
               },
               error: function (error) {
                  layer.msg('获取数据失败：' + error.responseText);
               }
            });
         })
      }
   </script>
</body>
</html>
